<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Tradesmen Site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!--Bootstrap css file-->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
	
	<div class="container">
	
		<div class="admin-bar">
			<div class="row">
				<div class="span3">
					<div class="logo">
						<a href="index.html"><img src="http://placehold.it/280x100"/></a>
					</div>
				</div>
				<div class="span7">
					<form class="well form-search">
						<input type="text" class="input-xlarge search-query" placeholder="Search for tradesman..." />
						<input type="text" class="input-large search-query" placeholder="Town/City or Postcode" />
						<a type="submit" class="btn btn-primary main-search-button" href="search.html">Search</a>
					</form>
				</div>
				<div class="span2">
					<div class="admin-buttons well">
						<div class="btn-group">
							<button class="btn account-button">My Account</button>
							<button class="btn dropdown-toggle" data-toggle="dropdown">
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu">
								<li><a class="#" data-toggle="modal" href="#myModal" >Log In</a></li>
								<li><a href="#">Settings</a></li>
								<li class="divider"><li>
								<li><a href="#">Log Out</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	
		<nav>
			<div class="row">
				<div class="span12">
					<div class="navbar">
						<div class="navbar-inner">
							<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</a>
							<a class="btn btn-navbar home-button" href="index.html"><i class="icon-home icon-white"></i></a>
							<div class="nav-collapse">
								<ul class="nav">
									<li><a href="index.html"><i class="icon-home icon-white"></i> Home</a></li>
									<li class="divider-vertical"></li>
									<li><a href="howitworks.html"><i class="icon-wrench icon-white"></i> How it Works</a></li>
									<li class="divider-vertical"></li>
									<li><a href="directory.html"><i class="icon-book icon-white"></i> Trade Directory</a></li>
									<li class="divider-vertical"></li>
									<li><a href="review.html"><i class="icon-pencil icon-white"></i> Leave a Review</a></li>
									<li class="divider-vertical"></li>
									<li><a href="contact.html"><i class="icon-envelope icon-white"></i> Contact Us</a></li>
									<li class="divider-vertical"></li>
									<div class="navbar-search pull-right">
										<input type="text" class="search-query" placeholder="Search">
									</div>
								</ul>
							</div><!--nav-collapse-->
						</div>
					</div>
				</div>
			</div>
		</nav>
		
		<section>
			<div class="row">
				<div class="span12">
					<div class="main-head well">
						<h2>Leave a review</h2><br/>
						<p>Now your job has been completed we'd love to hear about your experience and the service you recieved. We only require a couple of minutes of your time to rate and review the tradesmen you selected for your job, it makes such a difference to other customers searching for the right tradesmen to carry out their job, reviews make decision making much easier for customers looking for good reliable tradesmen.</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="span8"> 
					<div class="main-form well">
						<div class="form-step">
							<h3>Step 1: Search for tradesman</h3>
							<div class="tradesmen-search form-search">
								<label class="form-input-label">Enter tradesman's name:</label>
								<div class="input-append">
									<input class="span4" id="appendedInputButton" type="text"><button class="btn" type="button"><i class="icon-search"></i></button>
								</div>
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Your search results:</label>
								<select multiple="multiple" class="span4" id="multiSelect">
									<option>Tradesmen 1</option>
									<option>Tradesmen 2</option>
									<option>Tradesmen 3</option>
									<option>Tradesmen 4</option>
									<option>Tradesmen 5</option>
									<option>Tradesmen 6</option>
								 </select>
							</div>
						</div><br/>
						<div class="form-step">
							<h3>Step 2: Register your details</h3><br/>
							<div class="form-input form-inline">
								<label class="form-input-label">First Name:</label>
								<input type="text" class="input span4">
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Last Name:</label>
								<input type="text" class="input span4">
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Email Address:</label>
								<input type="text" class="input span4">
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Create Username:</label>
								<input type="text" class="input span4">
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Create Password:</label>
								<input type="text" class="input span4">
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Confirm Password:</label>
								<input type="text" class="input span4">
							</div>
						</div><br/>
						<div class="form-step">
							<h3>Step 3: Leave your review</h3><br/>
							<div class="form-input form-inline">
								<label class="form-input-label">Date Job Completed:</label>
								<input type="text" class="input span4" placeholder="Select date...">
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Describe Your Job:</label>
								<textarea type="text" class="input span4" rows="5" placeholder="Tell us a bit about your job..."></textarea>
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Leave Your Review:</label>
								<textarea type="text" class="input span4" rows="5" placeholder="How was your experience..."></textarea>
							</div>
							<!--rating system-->
							<div class="form-input form-inline">
								<label class="form-input-label">Punctuality:</label>
								.......
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Politeness:</label>
								.......
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Speed:</label>
								.......
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Value:</label>
								.......
							</div>
							<div class="form-input form-inline">
								<label class="form-input-label">Overall:</label>
								.......
							</div>
							<!--End rating system-->
						</div><br/>
						<div class="submit">
							<button class="btn btn-primary form-submit-button" type="submit">Submit Review</button>
						</div>
					</div>
				</div>
				<!--sidebar-->
				<aside>
					<div class="span4">
						<div class="contact-aside well">
							<h3>Why not leave a review..</h3><br/>
							<p>Rate the tradesman that carried out your job based on the service they delivered to you. It only takes a few moments to complete a review but it significantly helps improve the service you and other customers receive.</p>
						</div>
					</div>
				</aside>
			</div>
		</section>
	
		<hr>

	</div>	
	<!--Container-->
	
	<footer>
		<div class="container">
			<div class="row">
				<div class="span12">
					<div class="footer-links span3">
						<h4>Services</h4>
						<ul class="unstyled">								
							<li><a class="#" data-toggle="modal" href="#myModal2">FAQ's</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal3">Why Choose Us?</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal1">Registration Fees</a></li>
						</ul>
					</div>
					<div class="footer-links span3">
						<h4>More</h4>
						<ul class="unstyled">
							<li><a href="register.html">Sign Up</a></li>
							<li><a href="news.html">Latest News</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal4">Special Offers</a></li>
						</ul>
					</div>
					<div class="footer-links span3">
						<h4>Company</h4>
						<ul class="unstyled">
							<li><a href="contact.html">Contact Us</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal5">Privacy Policy</a></li>
							<li><a class="#" data-toggle="modal" href="#myModal6">Terms & Conditions</a></li>
						</ul>
					</div>
					<div class="footer-links span2">
						<h4>Stay in touch</h4>
						<ul class="unstyled">
							<li><a class="twitter" href="#">Twitter</a></li>
							<li><a class="facebook" href="#">Facebook</a></li>
							<li><a class="google" href="#">Flickr</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</footer>
	<div class="footer-floor">
		<div class="container">
			<div class="row">
				<div class="footer-copyright">
					<div class="span2">
						<p></p>
					</div>
					<div class="span8">
						<p>&copy; Tradesmen-site.co.uk 2012. All Rights Reserved.</p>
					</div>
					<div class="span2">
						<a>Who built this website?</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<!--Login modal-->
	<div class="modal fade hide login-modal" id="myModal">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Log in to (Website Name)</h3>
		</div>
		<div class="modal-body login-body">
			<div class="form-input form-inline">
				<label class="form-input-label">Username/Email:</label>
				<input type="text" class="input span3">
			</div>
			<div class="form-input form-inline">
				<label class="form-input-label">Password:</label>
				<input type="text" class="input span3">
			</div>
			<div class="form-input form-inline">
				<label class="form-input-label"></label>
				<label class="checkbox ">
					<input type="checkbox"> Remember me on this computer
				</label>
			</div>
			<div class="form-input form-inline">
				<label class="form-input-label"></label>
				<a href="#" class="">Forgot your password?</a>
			</div>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn btn-primary">Log In</a>
			<a href="#" class="btn" data-dismiss="modal">Close</a>
		</div>
	</div>
	
	<!--Subscription modal-->
	<div class="modal fade hide" id="myModal1">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Subscription Fees</h3>
		</div>
		<div class="modal-body">
			<div class="subscription">
				<h4>Yearly Subscription</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			</div><br/>
			<div class="subscription">
				<h4>Monthly Subscription</h4>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			</div><br/>
		</div>
		<div class="modal-footer">
			<a href="register.html" class="btn btn-primary">Register</a>
		</div>
	</div>
	
	<!--FAQ modal-->
	<div class="modal fade hide" id="myModal2">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>FAQ's</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Why us modal-->
	<div class="modal fade hide" id="myModal3">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Why Choose Us?</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Special Offers modal-->
	<div class="modal fade hide" id="myModal4">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Special Offers</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Privacy policy modal-->
	<div class="modal fade hide" id="myModal5">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Privacy Policy</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>	
	
	<!--Terms & Condtions modal-->
	<div class="modal fade hide" id="myModal6">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">&times;</button>
			<h3>Terms & Conditions</h3>
		</div>
		<div class="modal-body">
			<p>Lorem ipsum dolor sit amet, congue nibh in amet nunc volutpat id, libero pulvinar. Scelerisque odio elementum consectetuer cubilia nonummy at, quam elementum ut tempor hac, enim tempus scelerisque urna tellus nullam faucibus. Augue ea imperdiet, nec cras ullamcorper ac tincidunt vitae, nunc sunt, eu quam cras in gravida nec, id suspendisse neque neque quis quis sapien. Odio consequat rutrum vitae ipsum sit sed. Fusce leo hendrerit ligula arcu eu, arcu eget, odio eget ornare. Porttitor at odio tortor eu, maiores elit arcu ante aliquam sociis mi, volutpat suspendisse, ligula consequat praesent ligula, maecenas imperdiet gravida anim aliquam id lorem. Commodo convallis sed, justo nisl dolor et libero, ultricies aenean, sed sit. Integer id venenatis, dolor ipsum quas, aliquam nisl pellentesque, tempus velit. Aptent nunc sed ullamcorper ac curabitur. Eleifend enim et sed, libero sit suscipit, varius et fermentum fermentum gravida vitae placerat, inceptos rhoncus wisi, lorem vulputate faucibus lorem at vitae erat. Aliquam ac massa. Sed sed nunc vel bibendum, nonummy vel in eget viverra lobortis enim, id dictum cursus, integer a dis at ante consectetur et.</p>
		</div>
	</div>		
	
    <!--Bootstrap js files-->
    <script src="js/application.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

</body>
</html>
